<template>
	<view>
		<view class="beijing">
			<view style="margin-left: 100rpx;color: #ffffff;">支付成功，请您前往指定门店消费</view>
			<view class="dian">

				<view>伟业汽车美容店(人民路店)</view>
				<view>山阳区人民中路33号</view>
				<image src="../../static/images/lzx/门店.png" class="meidian"></image>
				<image src="../../static/images/lzx/纸飞机.png" class="zhiFeiJi"></image>
			</view>
		</view>








		<view class="container">
			<!-- 订单详情 -->
			<view class="order-details">
				<view class="title">订单详情</view>
				<view class="item">
					<text class="label">车辆精洗</text>
					<text class="value">¥ 39.90</text>
				</view>
				<view class="item">
					<text class="label">车辆附加费用</text>
					<text class="value">0</text>
				</view>
				<view class="divider"></view>
				<view class="item">
					<text class="label">原价</text>
					<text class="value">¥ 59.90</text>
				</view>
				<view class="item">
					<text class="label">店家优惠</text>
					<text class="value discount">- ¥ 20</text>
				</view>
				<view class="item">
					<text class="label">优惠券</text>
					<view class="value">
						<view class="coupon">66%</view>
						<text class="discount">- ¥ 10</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="item total">
					<text class="label">支付金额</text>
					<text class="value total-amount">¥ 29.9</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="item">
					<text class="label">订单号：</text>
					<text class="value">121212112487878</text>
				</view>
				<view class="item">
					<text class="label">下单时间：</text>
					<text class="value">2020.01.08 17:40</text>
				</view>
				<view class="item">
					<text class="label">车辆：</text>
					<text class="value">奔驰FWE4/豫A98FHJ</text>
				</view>
			</view>
		</view>

















	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.zhiFeiJi {
		height: 50rpx;
		width: 50rpx;
		position: absolute;
		top: 90rpx;
		right: 2%;

	}

	.meidian {
		height: 50rpx;
		width: 50rpx;
		position: absolute;
		top: 50rpx;
		left: 90rpx;
	}

	.beijing {
		width: 100%;
		height: 300rpx;
		background-color: #2679f5;
	}

	.dian {
		margin-top: 20rpx;
		margin-left: 150rpx;
	}

	.dian view:nth-child(1) {
		font-size: large;
		color: #ffffff;
	}

	.dian view:nth-child(2) {
		font-size: small;
		color: #ffffff;
		position: relative;
	}

	.container {
		margin-top: -150rpx;

		padding: 10px;
	}

	.order-details,
	.order-info {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 10px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.item .label {
		font-size: 14px;
		color: #666;
	}

	.item .value {
		font-size: 14px;
		color: #333;
	}

	.divider {
		height: 1px;
		background-color: #eee;
		margin: 10px 0;
	}

	.discount {
		color: #f56c6c;
	}

	.coupon {
		background-color: #eee;
		border-radius: 12px;
		padding: 2px 6px;
		font-size: 12px;
		color: #666;
		margin-right: 5px;
	}

	.total {
		font-weight: bold;
	}

	.total-amount {
		color: #67c23a;
	}
</style>